<template>
  <view class="">
    <uni-nav-bar title="绑定卡" color="#333" left-icon="left" @clickLeft="clickLeft()" statusBar></uni-nav-bar>
    <environment></environment>
    <image :src="CreateImg" mode="widthFix" class="token"></image>
    <view class="process" style="margin-top: 0px">
      <view class="title">绑定流程</view>
      <view class="technological">
        <uni-icons type="circle-filled" size="20" color="#108EEF"></uni-icons>
        <text class="text"></text>
        <uni-icons type="circle-filled" size="20" color="#108EEF"></uni-icons>
        <text class="text"></text>
        <uni-icons type="circle-filled" size="20" color="#108EEF"></uni-icons>
      </view>
      <view class="list">
        <text>领取蓝天卡</text>
        <text>输入密钥</text>
        <text>余额结算</text>
      </view>
    </view>
    <view class="cake">
      <view>卡密绑定</view>
      <view class="tokens">
        <text>密钥</text>
        <input type="text" placeholder="请输入密钥" v-model="password" class="uni-input" />
        <uni-icons type="scan" size="30" color="#666" @click="scanCode()"></uni-icons>
      </view>
      <view class="kami">
        <text>输入密钥，代金卡金额自动加到安蓝钱包余额，可直接用于支付加注</text>
        <text>注:代金卡不能兑换现金</text>
        <text @click="telCall('400-109-1606')" style="font-size: 28rpx; line-height: 50rpx">客服电话:400-109-1606</text>
      </view>
      <view class="sure_1" @click="submit('1')">确定</view>
    </view>
    <view class="sure_2" @click="submit('2')">绑卡记录</view>
    <!-- <view class="explain" v-html="explainAll"></view> -->

    <view class="sure_3" @click="follow()">关注公众号</view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { navBack, redirectTo } from '@/utils/navigator';
  import { toPublish } from '@mqtt';
  import { authorMe } from '@/gql/user';
  import { Creategroup } from '@/gql/team';
  import { successToast, showToast, showLoading } from '@/utils/prompt';
  import environment from '@c/pobulic/environment.vue';
  import { follow, telCall } from '@/utils/copyText';
  import { scanQRCode } from '@/utils/wechat.jssdk';
  import { getDriverID } from '@/stores/driverID';
  import { useUserStore } from '@/stores/user';
  import { onLoad, onUnload } from '@dcloudio/uni-app';
  import { decrypt } from '@/utils/jsencrypt';
  const userInfo = useUserStore();
  const password = ref('');
  const explainAll = ref('');
  const driver_id = getDriverID();
  const type = ref('');
  const CreateImg = ref('');

  const repeat = ref(true); //放重复点击
  const all = ref()
  onLoad((pearm) => {
    type.value = pearm.type;
    const loct = uni.getStorageSync('StoreData')
    all.value = JSON.parse(decrypt(loct))
    password.value = all.value.pass
  });
  // carexplain();
  function carexplain() {
    const payload = {
      query: authorMe,
      variables: {
        code: 'kami',
      },
    };
    toPublish('ql/driver/getMyblock', payload, (obj : any) => {
      const { data } = obj;
      explainAll.value = data.get_myblock.content;
    });
  }
  Creategroups();
  function Creategroups() {
    const payload = {
      query: Creategroup,
      variables: { type: 'driver-gift' },
    };
    toPublish('ql/team/getAds', payload, (obj : any) => {
      uni.hideLoading();
      const { data } = obj;
      CreateImg.value = data.get_ads.imageurl;
    });
  }
  function scanCode() {
    scanQRCode((res : any) => {
      const orderIDs = res.resultStr.split('pass=')[1];
      if (orderIDs) {
        password.value = orderIDs
      } else {
        alert('请扫描正确的二维码');
      }
    });
  }
  function submit(num : string) {
    switch (num) {
      case '1':
        if (!password.value) {
          showToast('请输入密钥');
          return;
        }
        const payload = {
          driver_id,
          code: password.value,
        };
        showLoading();
        if (!repeat.value) {
          return;
        }
        repeat.value = false;
        toPublish('driver/useCard', payload, (obj : any) => {
          const { code, msg } = obj;
          password.value = '';
          if (code === 1) {
            if (uni.getStorageSync('StoreData')) {
              uni.removeStorageSync('StoreData');
            }
            successToast(msg);
            userInfo.getUserInfo();
            setTimeout(() => {
              repeat.value = true;
              uni.navigateTo({
                url: '/pages/giftCard/cardList',
              });
            }, 1000);
          } else {
            repeat.value = true;
            showToast(msg);
          }
        });
        break;
      case '2':
        password.value = '';
        uni.navigateTo({
          url: '/pages/giftCard/cardList',
        });
        break;
    }
  }
  function clickLeft() {
    if (type.value == '1') {
      redirectTo('index/mine');
    } else {
      navBack();
    }
  }
  onUnload(() => {
    if (uni.getStorageSync('StoreData')) {
      uni.removeStorageSync('StoreData');
    }
  })
</script>

<style scoped lang="less">
  .token {
    width: 96%;
    margin: 15rpx 2% 10rpx;
    // height:352rpx;
  }

  .process {
    width: 96%;
    margin: 15rpx auto;
    border-radius: 5px;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: white;

    .title {
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }

    .technological {
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 15rpx auto;

      .text {
        width: 250rpx;
        height: 3rpx;
        background-color: #108eef;
      }
    }

    .list {
      width: 90%;
      margin: 0px auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      text:nth-of-type(1) {
        text-align: left;
      }

      text:nth-of-type(3) {
        text-align: right;
      }

      text {
        width: 30%;
        text-align: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #108eef;
      }
    }
  }

  .cake {
    width: 96%;
    margin: 0rpx auto;
    border-radius: 5px;
    padding: 20rpx 20rpx 40rpx;
    box-sizing: border-box;
    background-color: white;

    view:nth-of-type(1) {
      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }

    .kami {
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;

      text:nth-of-type(2) {
        margin-top: 10rpx;
        display: block;
        color: #1d92ff;
      }
    }

    .tokens {
      width: 100%;
      height: 110rpx;
      margin: 15rpx 0px;
      background-color: white;
      box-shadow: 0px 2px 23px 1px rgba(204, 204, 204, 0.3);
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 5px;

      input {
        text-align: right;
        width: 460rpx;
      }
    }

    .sure_1 {
      width: 370rpx;
      height: 80rpx;
      background: linear-gradient(104deg, #41a3ff, #1b91ff);
      border-radius: 5px;
      font-size: 34rpx;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #ffffff;
      text-align: center;
      line-height: 80rpx;
      margin: 5vh auto 0px;
    }
  }

  .sure_2 {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #666666;
    text-align: center;
    margin: 50rpx auto 10px;
  }

  .sure_3 {
    width: 370rpx;
    height: 80rpx;
    border: 1px solid #41a3ff;
    border-radius: 5px;
    font-size: 34rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #41a3ff;
    text-align: center;
    line-height: 80rpx;
    margin: 2vh auto;
  }

  .explain {
    width: 90%;
    margin: 2.5% 5%;
    color: #666;
  }

  .sure_4 {
    width: 100%;
  }
</style>